<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../js/jquery.gccolor.1.0.3/css/gccolor.css" />
<link rel="stylesheet" media="screen" type="text/css" href="../js/colorpicker/css/layout.css" />
<link rel="stylesheet" media="screen" type="text/css" href="../js/colorpicker/css/colorpicker.css" />
<link rel="stylesheet" href="../css/smoothness/jquery-ui-1.7.1.custom.css" type="text/css" media="screen" />
<script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript" src="../js/jquery.gccolor.1.0.3/jquery.gccolor.1.0.3.js"></script>
<script type="text/javascript" src="../js/colorpicker/js/colorpicker.js"></script>
<script type="text/javascript">
		 $(document).ready(function() {

			for(i=1;i<=15;i++){
				var divName ="#" + 'cs' + i;
				
				$(divName).ColorPicker({
					color: '#0000ff',
					onShow: function (colpkr) {
						$(colpkr).fadeIn(500);
						return false;
					},
					onHide: function (colpkr) {
						$(colpkr).fadeOut(500);
						return false;
					},
					onChange: function (hsb, hex, rgb) {
						divName = "#" + this.data('colorpicker').el.id;
						$(divName + ' div').css('backgroundColor', '#' + hex);
						$('#hd' + this.data('colorpicker').el.id).attr("value",'#' + hex);
					}
				});
			}
			 
		 });  	
		 $(function() {
				$("#tabs").tabs();
			});
		
</script>
<title>Create Templet</title>
</head>
<body>

<div class="demo">
<form method="POST" action="/doAddTemplet.do">
<input id="hdcs1" type="hidden" name="hdcs1" value="#0000ff" />
<input id="hdcs2" type="hidden" name="hdcs2" value="#0000ff" />
<input id="hdcs3" type="hidden" name="hdcs3" value="#0000ff" />
<input id="hdcs4" type="hidden" name="hdcs4" value="#0000ff" />
<input id="hdcs5" type="hidden" name="hdcs5" value="#0000ff" />
<input id="hdcs6" type="hidden" name="hdcs6" value="#0000ff" />
<input id="hdcs7" type="hidden" name="hdcs7" value="#0000ff" />
<input id="hdcs8" type="hidden" name="hdcs8" value="#0000ff" />
<input id="hdcs9" type="hidden" name="hdcs9" value="#0000ff" />
<input id="hdcs10" type="hidden" name="hdcs10" value="#0000ff" />
<input id="hdcs11" type="hidden" name="hdcs11" value="#0000ff" />
<input id="hdcs12" type="hidden" name="hdcs12" value="#0000ff" />
<input id="hdcs13" type="hidden" name="hdcs13" value="#0000ff" />
<input id="hdcs14" type="hidden" name="hdcs14" value="#0000ff" />
<input id="hdcs15" type="hidden" name="hdcs15" value="#0000ff" />

<div>
	<p>
		<label>Name</label><br/>
		<input type="text" name="name" />
	</p>
	<p>
		<label >Description</label><br/>
		<textarea name="desc"></textarea>
	</p>
</div>

<div id="tabs">
	<ul>
		<li><a href="#chart-tab">Chart</a></li>
		<li><a href="#xaxis-tab">X_Axis</a></li>
		<li><a href="#yaxis-tab">Y_Axis</a></li>
		<li><a href="#tooltip-tab">Tool Tip</a></li>
	</ul>
	<div id="chart-tab">
		<fieldset>
			<legend>chart title</legend>

			<div>
				title<input name="tcontent" type="text" value="test"></input>
			</div>
			<div>
				font size:
				<select name="tsize">
					<option selected="selected" value="12">12</option>
					<option value="25">25</option>
				</select>
			</div>
		<!--  
			<div>
				font family
				<select name="tfont">
					<option selected="selected" value="Verdana">Verdana</option>
					<option value="Courier">Courier</option>
				</select>
			</div>	
		-->					
			<div>
				<table>
					<tr>
						<td><div>Color</div></td>
						
						<td><div id="cs1"><div style="background-color: #0000ff"></div></div></td>
					</tr>
				</table>		
			</div>
			
			<div>
				Align
				<select name="talign">
					<option selected="selected">left</option>
					<option>center</option>
					<option>right</option>
				</select>
			</div>
		</fieldset>
		
		<fieldset>
			<legend>Background</legend>
			<div>
				<table>
					<tr>
						<td><div style="left0;width:40">Grid Line Color</div></td>
						<td><div id="cs2"><div style="background-color: #0000ff"></div></div></td>
					</tr>
				</table>
			</div>
			
			<div>
				line bound
				<select name="lbound">
					<option selected="selected">1px</option>
					<option>2px</option>
				</select>
			</div>
			<div>
				<table>
					<tr>
						<td><div style="left0;width:40">color</div></td>
						<td><div id="cs3"><div style="background-color: #0000ff"></div></div></td>
					</tr>
				</table>	
			</div>
		</fieldset>
	</div>
	
	<div id="xaxis-tab">
		<fieldset>
			<legend>X_Axis</legend>
			<div>
				<table>
					<tr>
						<td><div style="left0;width:40">color</div></td>
						<td><div id="cs4"><div style="background-color: #0000ff"></div></div></td>
					</tr>
				</table>	
			</div>
			<div>
				<table>
					<tr>
						<td><div style="left0;width:40">grid color</div></td>
						<td><div id="cs5"><div style="background-color: #0000ff"></div></div></td>
					</tr>
				</table>	
			</div>
			
			<div>
				Steps:
				<select name="xsteps">
					<option selected="selected">1</option>
					<option>2</option>
					<option>3</option>
				</select>
			</div>
			<div>
				Stroke
				<select name="xstroke">
					<option selected="selected">1</option>
					<option>2</option>
					<option>3</option>
				</select>
			</div>
			<div>
				Tick Height
				<select name="xheight">
					<option selected="selected">1</option>
					<option>2</option>
					<option>3</option>
				</select>
			</div>
			</fieldset>

			<fieldset>
			
			<legend>X_Labels</legend>
			<div>
				<table>
					<tr>
						<td><div style="left0;width:40">Color</div></td>
						<td><div id="cs6"><div style="background-color: #0000ff"></div></div></td>
					</tr>
				</table>	
			</div>
			<div>
				Size
				<select name="xlsize">
					<option selected="selected">12</option>
					<option>25</option>
				</select>
			</div>
			<div>
				rotate
				<select name='xrotate'>
					<option selected="selected" value="horizontal">horizontal</option>
					<option value="diagonal">diagonal</option>
					<option value="vertical">vertical</option>
				</select>
			</div>
			</fieldset>
			
			<fieldset>
			<legend>X_Legend</legend>
			<div>
				content<input name="xtitle" type="text" value="test" ></input>
			</div>
			<div>
				font family
				<select name="xltfont">
					<option selected="selected" value="Verdana">Verdana</option>
					<option>Courier
					</option>
				</select>
			</div>
			<div>
				font size
				<select name="xldfontsize">
					<option selected="selected">1</option>
					<option>2</option>
					<option>3</option>
				</select>
			</div>
			
			<div>
				<table>
					<tr>
						<td><div style="left0;width:40">Color</div></td>
						<td><div id="cs7"><div style="background-color: #0000ff"></div></div></td>
					</tr>
				</table>
			</div>
			
			<div>
				align
				<select name="xldalign">
					<option selected="selected">left</option>
					<option>center</option>
					<option>right</option>
				</select>
			</div>				
		</fieldset>
	</div>
	
	<div id="yaxis-tab">
		<fieldset>
			<legend>Y Axis</legend>
			<div>
				<table>
					<tr>
						<td><div style="left0;width:40">color</div></td>
						<td><div id="cs8"><div style="background-color: #0000ff"></div></div></td>
					</tr>
				</table>	
			</div>
			<div>
				<table>
					<tr>
						<td><div style="left0;width:40">grid color</div></td>
						<td><div id="cs9"><div style="background-color: #0000ff"></div></div></td>
					</tr>
				</table>	
			</div>
			<div>
				Steps:
				<select>
					<option selected="selected">1</option>
					<option>2</option>
					<option>3</option>
				</select>
			</div>
			<div>
				Stroke
				<select>
					<option selected="selected">1</option>
					<option>2</option>
					<option>3</option>
				</select>
			</div>
			<div>
				Height
				<select>
					<option selected="selected">1</option>
					<option>2</option>
					<option>3</option>
				</select>
			</div>
			</fieldset>
			<fieldset>
			
			<legend>Y_Labels</legend>
			<div>
				<table>
					<tr>
						<td><div style="left0;width:40">Color</div></td>
						<td><div id="cs10"><div style="background-color: #0000ff"></div></div></td>
					</tr>
				</table>	
			</div>
			<div>
				Size
				<select>
					<option selected="selected">12</option>
					<option>25</option>
				</select>
			</div>
			<div>
				rotate
				<select name='xrotate'>
					<option selected="selected" value="horizontal">horizontal</option>
					<option value="diagonal">diagonal</option>
					<option value="vertical">vertical</option>
				</select>
			</div>
			</fieldset>
			
			<fieldset>
			<legend>Y_Legend</legend>
			<div>
				content<input name="xtitle" type="text" value="test" ></input>
			</div>
			<div>
				font family
				<select name="tfont">
					<option selected="selected" value="Verdana">Verdana</option>
					<option value="Courier,">Courier</option>
				</select>
			</div>
			<div>
				font size
				<select name="xfontsize">
					<option selected="selected">1</option>
					<option>2</option>
					<option>3</option>
				</select>
			</div>
			
			<div>
				<table>
					<tr>
						<td><div style="left0;width:40">Color</div></td>
						<td><div id="cs11"><div style="background-color: #0000ff"></div></div></td>
					</tr>
				</table>
			</div>
			
			<div>
				align
				<select name="xalign">
					<option selected="selected">left</option>
					<option>center</option>
					<option>right</option>
				</select>
			</div>				
		</fieldset>
	</div>
	<div id="tooltip-tab">
		<fieldset>
			<legend>title</legend>

			<div>
				font
				<select name="ttitlefont">
					<option selected="selected">宋体</option>
					<option>黑体</option>
				</select>
			</div>
			<div>
					fontsize
					<select name="ttitlefontsize">
						<option selected="selected">1</option>
						<option>2</option>
						<option>3</option>
					</select>
				</div>
			<div>
				<table>
					<tr>
						<td><div style="left0;width:40">Color</div></td>
						<td><div id="cs12"><div style="background-color: #0000ff"></div></div></td>
					</tr>
				</table>		
			</div>
			<div>
				align
					<select name="ttitlealign">
						<option selected="selected">左对齐</option>
						<option>居中</option>
						<option>右对齐</option>
					</select>
				</div>
		</fieldset>
		<fieldset>
			<legend>content</legend>
			<div>
				font
				<select name="tcontentfont">
					<option selected="selected">宋体</option>
					<option>黑体</option>
				</select>
			</div>
			<div>
					font size
					<select name="tcontentfontsize">
						<option selected="selected">1</option>
						<option>2</option>
						<option>3</option>
					</select>
				</div>
			<div>
				<table>
					<tr>
						<td><div style="left0;width:40">Color</div></td>
						<td><div id="cs13"><div style="background-color: #0000ff"></div></div></td>
					</tr>
				</table>		
			</div>
			<div>
					align
					<select name="tcontentalign">
						<option selected="selected" value="left">左对齐</option>
						<option value="center">居中</option>
						<option value="right">右对齐</option>
					</select>
				</div>
		</fieldset>
		
		<fieldset>
			<legend>ToolTip</legend>
			<div>
				<table>
					<tr>
						<td><div style="left0;width:40">Color</div></td>
						<td><div id="cs14"><div style="background-color: #0000ff"></div></div></td>
					</tr>
				</table>			
			</div>
			<div>
				border
				<select name="tborder">
					<option selected="selected" >1磅</option>
					<option>2磅</option>
				</select>
			</div>
			<div>
				<table>
					<tr>
						<td><div style="left0;width:40">Color</div></td>
						<td><div id="cs15"><div style="background-color: #0000ff"></div></div></td>
					</tr>
				</table>			
			</div>
		</fieldset>
	</div>
</div>
	<input  type="submit" value="Create Templet" />
</form>
</div>
</body>
</html>